<HTML>
<HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

#auth
{
    background-color: #fff;
    color: #000;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background-image: -webkit-linear-gradient(top, #fff, #eee);
    background-image: -moz-linear-gradient(top, #fff, #eee);
    background-image: -ms-linear-gradient(top, #fff, #eee);
    background-image: -o-linear-gradient(top, #fff, #eee);
    background-image: linear-gradient(top, #fff, #eee);  
    height: 424px;
    width: 300px;
    margin: -300px 0 0 -180px;
    padding: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;  
}

#auth:before
{
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px dashed #ccc;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    -moz-box-shadow: 0 0 0 1px #fff;
    -webkit-box-shadow: 0 0 0 1px #fff;
    box-shadow: 0 0 0 1px #fff;
}

#auth .logo
{
	display: flex;
	margin-top: -16px;
	margin-bottom: 5px;
	width: 57px;
	height: 57px;
}

#auth h1
{
    text-transform: uppercase;
    text-align: center;
    color: #666;
    margin: 0 0 10px 0;
    letter-spacing: 4px;
    font: normal 26px/1 Verdana, Helvetica;
    position: relative;
}

#auth h1:after, #auth h1:before
{
    background-color: #777;
    content: "";
    height: 1px;
    position: absolute;
    top: 15px;
    width: 60px;   
}

#auth h1:after
{ 
    background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(left, #777, #fff);
    background-image: -moz-linear-gradient(left, #777, #fff);
    background-image: -ms-linear-gradient(left, #777, #fff);
    background-image: -o-linear-gradient(left, #777, #fff);
    background-image: linear-gradient(left, #777, #fff);      
    right: 0;
}

#auth h1:before
{
    background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(right, #777, #fff);
    background-image: -moz-linear-gradient(right, #777, #fff);
    background-image: -ms-linear-gradient(right, #777, #fff);
    background-image: -o-linear-gradient(right, #777, #fff);
    background-image: linear-gradient(right, #777, #fff);
    left: 0;
}

#auth fieldset
{
    border: 0;
    padding: 0;
    margin: 0;
}

#inputs input[type=text], input[type=password]
{
    background: #f1f1f1;
    padding: 15px 15px 15px 30px;
    margin: 0 0 10px 0;
    width: 253px;
    border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
}

#username
{
    background-position: 5px -2px !important;
}

#password
{
    background-position: 5px -52px !important;
}

#2fatotp
{
    background-position: 5px -52px !important;
}

#inputs input[type=text]:focus, input[type=password]:focus
{
    background-color: #fff;
    border-color: #e8c291;
    outline: none;
    -moz-box-shadow: 0 0 0 1px #e8c291 inset;
    -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
    box-shadow: 0 0 0 1px #e8c291 inset;
}

#inputs input[type=text]:disabled, input[type=password]:disabled
{
    background-color: #aaa;
}

#actions
{
    margin: 25px 0 0 0;
}

#submit
{		
    background-color: #ffb94b;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fddb6f), to(#ffb94b));
    background-image: -webkit-linear-gradient(top, #fddb6f, #ffb94b);
    background-image: -moz-linear-gradient(top, #fddb6f, #ffb94b);
    background-image: -ms-linear-gradient(top, #fddb6f, #ffb94b);
    background-image: -o-linear-gradient(top, #fddb6f, #ffb94b);
    background-image: linear-gradient(top, #fddb6f, #ffb94b);
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    
     -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
     -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;    
    
    border-width: 1px;
    border-style: solid;
    border-color: #d69e31 #e3a037 #d5982d #e3a037;

    float: left;
    height: 35px;
    padding: 0;
    width: 120px;
    cursor: pointer;
    font: bold 15px Arial, Helvetica;
    color: #8f5a0a;
}

#submit:hover,#submit:focus
{		
    background-color: #fddb6f;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb94b), to(#fddb6f));
    background-image: -webkit-linear-gradient(top, #ffb94b, #fddb6f);
    background-image: -moz-linear-gradient(top, #ffb94b, #fddb6f);
    background-image: -ms-linear-gradient(top, #ffb94b, #fddb6f);
    background-image: -o-linear-gradient(top, #ffb94b, #fddb6f);
    background-image: linear-gradient(top, #ffb94b, #fddb6f);
}	

#submit:active
{		
    outline: none;
   
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;		
}

#submit::-moz-focus-inner
{
  border: none;
}

#actions a
{
    color: #3151A2;    
    float: right;
    line-height: 35px;
    margin-left: 10px;
}
</style>
</HEAD>
<BODY>

<div id="auth">
<form method="post">
  <center><img class="logo" src="data:image/png;base64, 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"></center>
  <h1>Domoticz</h1>
  <div>Application '<b><i>###REPLACE_APP###</i></b>' is requesting access to your Domoticz system.</div>
  <br>
  <div id="error_div">
	<div><span id="error_text" style="color:darkred">###REPLACE_ERROR###</span></div>
	<br>
  </div>
  <fieldset id="inputs">
    <input type="text" autocapitalize="none" autocorrect="off" id="username" name="uname" placeholder="Username" autofocus required>
    <input type="password" id="password" name="psw" placeholder="Password" required>
    <input type="text" id="2fatotp" name="totp" autocomplete="off" placeholder="One-Time Passcode" ###REPLACE_2FATOTP###>
    <br>
    <input type="checkbox" id="consent" name="consent" required> <label for="consent" id="consentlbl">I hereby grant access on my behalf.</label>
    <br>
    <br>
  </fieldset>
  <fieldset id="actions">
    <input type="submit" id="submit" value="Allow">
      <a href="http://www.domoticz.com">www.domoticz.com</a>
  </fieldset>
</form>
</div>

<script type="text/javascript" charset="utf-8">
	const elem = document.getElementById("error_text");
	if (elem.innerHTML.length == 0) {
		document.getElementById("error_div").style.display = 'none';
		
		let aDiv = document.getElementById("auth");
		aDiv.style.height = (424 - 36) + 'px';
	}
</script>
</BODY>
</HTML>
